import {Button, Snackbar} from "@material-ui/core";
import style from "./Navigation.module.scss"
import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
import ArchiveOutlinedIcon from '@material-ui/icons/ArchiveOutlined';
import CategoryOutlinedIcon from '@material-ui/icons/CategoryOutlined';
import LocalOfferOutlinedIcon from '@material-ui/icons/LocalOfferOutlined';
import RateReviewOutlinedIcon from '@material-ui/icons/RateReviewOutlined';
import PhotoLibraryOutlinedIcon from '@material-ui/icons/PhotoLibraryOutlined';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import MuiAlert, {AlertProps} from '@material-ui/lab/Alert';
import React from "react";

const navStyle = {
  background: "#0000004D"
}

function Alert(props: AlertProps) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

function Navigation() {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div style={navStyle}>
      <div style={{width: "100%", height: "3em", display: "flex", flexDirection: "row"}}>
        <div style={{display: "flex", marginRight: "auto"}}>
          <Button href={"/"}>
            <div className={style.title}>小荣的博客</div>
          </Button>
        </div>
        <div style={{display: "flex", flexDirection: "row"}}>
          <Button href={"/home"}>
            <HomeOutlinedIcon className={style.itemIcon}/>
            <div className={style.item}>首页</div>
          </Button>
          <Button onClick={handleClick}>
            <ArchiveOutlinedIcon className={style.itemIcon}/>
            <div className={style.item}>归档</div>
          </Button>
          <Button onClick={handleClick}>
            <CategoryOutlinedIcon className={style.itemIcon}/>
            <div className={style.item}>分类</div>
          </Button>
          <Button onClick={handleClick}>
            <LocalOfferOutlinedIcon className={style.itemIcon}/>
            <div className={style.item}>标签</div>
          </Button>
          <Button href={"/picture-bed"}>
            <PhotoLibraryOutlinedIcon className={style.itemIcon}/>
            <div className={style.item}>图床</div>
          </Button>
          <Button onClick={handleClick}>
            <RateReviewOutlinedIcon className={style.itemIcon}/>
            <div className={style.item}>留言</div>
          </Button>
          <Button href={"/about"}>
            <InfoOutlinedIcon className={style.itemIcon}/>
            <div className={style.item}>关于</div>
          </Button>
        </div>
      </div>
      <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}
                anchorOrigin={{vertical: 'top', horizontal: 'center'}}>
        <Alert onClose={handleClose} severity="error">
          这个功能还在开发中！
        </Alert>
      </Snackbar>
    </div>
  )
}

export default Navigation;